<template>
    <div>
        home page
        <!-- <h2>当前计数：{{counter}}</h2> -->

        <!-- <h2>当前计数：{{state.counter}}</h2> -->

        <!-- 在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过ref.value的方式 -->
        <h2>当前计数：{{counter}}</h2>
        
        <button @click="increment">+1</button>
    </div>
</template>
<script>
import { reactive } from 'vue';
import { ref } from 'vue';

export default {
    setup() {
        //1.不会响应式
        // let counter = 100;

        // //局部函数
        // const increment = () => {
        //     counter++;
        //     console.log(counter)  //counter改变了 但没有响应式页面
        // }

        // return {
        //     counter,
        //     increment
        // }

        //1.reactive 传入的必须是一个对象或者数组
        // const state = reactive({
        //     counter: 100
        // })
        // const increment = () => {
        //     state.counter++;
        //     console.log(state.counter)  
        // }
        // return {
        //     state,
        //     increment
        // }

        //2.  ref可以传入基本数据类型 返回的是一个对象
        let counter = ref(100);
        const increment = () => {
            counter.value++;
            console.log(counter.value)  
        }
        return {
            counter,
            increment
        }
    }
}
</script>
<style>
</style>
